<template>
  <div class="box-border w-full h-full px-4 pb-10 overflow-y-auto">
    <div class="rounded-md border_blue !border-blue-500 w-48 flex items-center justify-center px-2">
      ESD阀门异常关断设置
    </div>

    <div class="w-full mt-2 text-base">

      <!-- 乌百线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="wb_fmyc_lineChecked" class="mr-2">乌百线</el-checkbox>
        </div>
        <div v-show="wb_fmyc_lineChecked" class="w-full text-base">
          <div class="w-[400px] h-[120px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border">
            <div class="flex items-center justify-center gap-4">
              <span>阀门异常时间</span>
              <el-input v-model="wb_T_err" class="!w-[160px]" />
              <span>分钟</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span>管段MAOP</span>
              <el-input v-model="wb_FA_err" class="!w-[160px]" />
              <span>MPa</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 百克线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="bk_fmyc_lineChecked" class="mr-2">百克线</el-checkbox>
        </div>
        <div v-show="bk_fmyc_lineChecked" class="w-full text-base">
          <div class="w-[400px] h-[120px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border">
            <div class="flex items-center justify-center gap-4">
              <span>阀门异常时间</span>
              <el-input v-model="bk_T_err" class="!w-[160px]" />
              <span>分钟</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span>管段MAOP</span>
              <el-input v-model="bk_FA_err" class="!w-[160px]" />
              <span>MPa</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 调油一线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="ty_fmyc_lineChecked" class="mr-2">调油一线</el-checkbox>
        </div>
        <div v-show="ty_fmyc_lineChecked" class="w-full text-base">
          <div class="w-[400px] h-[120px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border">
            <div class="flex items-center justify-center gap-4">
              <span>阀门异常时间</span>
              <el-input v-model="ty_T_err" class="!w-[160px]" />
              <span>分钟</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span>管段MAOP</span>
              <el-input v-model="ty_FA_err" class="!w-[160px]" />
              <span>MPa</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 新81#线 -->
      <div>
        <div class="flex items-center font-bold">
          <el-checkbox v-model="new81_fmyc_lineChecked" class="mr-2">新81#线</el-checkbox>
        </div>
        <div v-show="new81_fmyc_lineChecked" class="w-full text-base">
          <div class="w-[400px] h-[120px] bg-white rounded-lg shadow flex flex-col items-center gap-2 py-4 box-border">
            <div class="flex items-center justify-center gap-4">
              <span>阀门异常时间</span>
              <el-input v-model="new81_T_err" class="!w-[160px]" />
              <span>分钟</span>
            </div>
            <div class="flex items-center justify-center gap-4">
              <span>管段MAOP</span>
              <el-input v-model="new81_FA_err" class="!w-[160px]" />
              <span>MPa</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
const wb_fmyc_lineChecked = ref(false)
const bk_fmyc_lineChecked = ref(false)
const ty_fmyc_lineChecked = ref(false)
const new81_fmyc_lineChecked = ref(false)

// 各线的 MAOP 和 时间
const wb_FA_err = ref('2.5')
const bk_FA_err = ref('2.5')
const ty_FA_err = ref('2.5')
const new81_FA_err = ref('2.5')

const wb_T_err = ref('120')
const bk_T_err = ref('180')
const ty_T_err = ref('240')
const new81_T_err = ref('300')

// 校验逻辑
const validateSettings = () => {
  // 至少要选择一条管线
  if (!wb_fmyc_lineChecked.value && !bk_fmyc_lineChecked.value && !ty_fmyc_lineChecked.value && !new81_fmyc_lineChecked.value) {
    ElMessage.error('请至少选择一条管线进行ESD阀门异常关断模拟')
    return false
  }

  // 检查已选管线的必填项
  if (wb_fmyc_lineChecked.value && (!wb_FA_err.value || !wb_T_err.value)) {
    ElMessage.error('乌百线的参数未填写完整')
    return false
  }
  if (bk_fmyc_lineChecked.value && (!bk_FA_err.value || !bk_T_err.value)) {
    ElMessage.error('百克线的参数未填写完整')
    return false
  }
  if (ty_fmyc_lineChecked.value && (!ty_FA_err.value || !ty_T_err.value)) {
    ElMessage.error('调油一线的参数未填写完整')
    return false
  }
  if (new81_fmyc_lineChecked.value && (!new81_FA_err.value || !new81_T_err.value)) {
    ElMessage.error('新81#线的参数未填写完整')
    return false
  }

  return true
}

// 表单校验结果
const isFormValid = computed(() => {
  return (
    wb_fmyc_lineChecked.value ||
    bk_fmyc_lineChecked.value ||
    ty_fmyc_lineChecked.value ||
    new81_fmyc_lineChecked.value
  )
})

// ✅ getParamsData 返回格式
const getParamsData = () => {
  return {
    M_1: wb_fmyc_lineChecked.value ? '1' : '0',
    M_2: bk_fmyc_lineChecked.value ? '1' : '0',
    M_3: ty_fmyc_lineChecked.value ? '1' : '0',
    M_4: new81_fmyc_lineChecked.value ? '1' : '0',
    MAOP_1: wb_FA_err.value,
    MAOP_2: bk_FA_err.value,
    MAOP_3: ty_FA_err.value,
    MAOP_4: new81_FA_err.value,
    TIME_1: wb_T_err.value,
    TIME_2: bk_T_err.value,
    TIME_3: ty_T_err.value,
    TIME_4: new81_T_err.value
  }
}

defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.border_blue {
  border: 2px solid rgba(69, 122, 178, 1);
}
</style>
